<div class="page-layout simple right-sidenav single-scroll" layout="row">

    <!-- CENTER -->
    <div class="center" flex ms-scroll>

        <!-- HEADER -->
        <div class="header md-accent-bg" layout="row" layout-align="space-between">

            <div>
                <span class="h2">Right sidenav with page scroll</span>
            </div>

            <md-button class="md-icon-button sidenav-toggle" ng-click="vm.toggleSidenav('sidenav')" hide-gt-md
                       aria-label="Toggle sidenav">
                <md-icon md-font-icon="icon-menu" class="icon"></md-icon>
            </md-button>
        </div>
        <!-- / HEADER -->

        <!-- CONTENT -->
        <div class="content md-background-bg">

            <!-- DEMO CONTENT -->
            <div ng-include="'app/main/ui/page-layouts/demo/demo-content.html'"></div>
            <!-- / DEMO CONTENT -->

        </div>
        <!-- / CONTENT -->

    </div>
    <!-- / CENTER -->

    <!-- SIDENAV -->
    <md-sidenav class="sidenav md-sidenav-right" md-is-locked-open="$mdMedia('gt-md')" md-component-id="sidenav"
                ms-scroll ms-sidenav-helper>

        <!-- DEMO SIDENAV -->
        <div ng-include="'app/main/ui/page-layouts/demo/demo-sidenav.html'"></div>
        <!-- / DEMO SIDENAV -->

    </md-sidenav>
    <!-- / SIDENAV -->

</div>